<template>
  <div v-loading="loading" class="content">
    <el-page-header :content="hotel.name" @back="goBack" />
    <el-row class="item first-row flex row" :gutter="16">
      <el-col class="item-left" :span="2">
        <div>酒店介绍</div>
      </el-col>
      <el-col class="item-right" :span="20">
        <div v-html="hotel.introduce" />
      </el-col>
      <el-col class="item-but" :span="2">
        <el-button
          size="mini"
          type="success"
          plain
          @click="updateRichText(1, hotel.introduce)"
        >修改</el-button>
      </el-col>
    </el-row>
    <el-row class="item flex row" :gutter="16">
      <el-col class="item-left" :span="2">
        <div>酒店地址</div>
      </el-col>
      <el-col class="item-right" :span="20">
        <div v-html="hotel.address" />
      </el-col>
      <el-col class="item-but" :span="2">
        <el-button
          size="mini"
          type="success"
          plain
          @click="updateRichText(2, hotel.address)"
        >修改</el-button>
      </el-col>
    </el-row>
    <el-row class="item flex row" :gutter="16">
      <el-col class="item-left" :span="2">
        <div>推荐理由</div>
      </el-col>
      <el-col class="item-right" :span="20">
        <div v-html="hotel.recommend" />
      </el-col>
      <el-col class="item-but" :span="2">
        <el-button
          size="mini"
          type="success"
          plain
          @click="updateRichText(3, hotel.recommend)"
        >修改</el-button>
      </el-col>
    </el-row>
    <el-row class="item flex row" :gutter="16">
      <el-col class="item-left" :span="2">
        <div>酒店环境</div>
      </el-col>
      <el-col class="item-right" :span="20">
        <div v-html=" hotel.surrounding" />
      </el-col>
      <el-col class="item-but" :span="2">
        <el-button
          size="mini"
          type="success"
          plain
          @click="updateRichText(4, hotel.surrounding)"
        >修改</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="top-room">
      <el-col :span="24">
        <el-button type="primary" class="top-room-right" @click="addRoom">添加房间</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="hotel.roomList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="id" width="70" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="房间" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="床" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.roomBed.name }}</template>
      </el-table-column>
      <el-table-column label="早餐" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.roomBreakfast.name }}</template>
      </el-table-column>
      <el-table-column label="费用" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.price }}￥</template>
      </el-table-column>
      <el-table-column label="面积" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.area }}(平方米)</template>
      </el-table-column>
      <el-table-column label="楼层" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.floor }}</template>
      </el-table-column>
      <el-table-column label="WiFi" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.wifi" type="success">有</el-tag>
          <el-tag v-else type="danger">无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="额外说明" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.explain">{{ scope.row.explain }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope">
          <div class="flex col item-do">
            <el-button
              class="item-do-but"
              size="mini"
              type="success"
              plain
              @click="updateRoom(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              class="item-do-but"
              size="mini"
              type="danger"
              plain
              @click="deleteRoom(scope.$index, scope.row.id)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <RichText
      :id="hotel.id"
      :dialog-visible="richTextVisible"
      :content="content"
      :code="code"
      :title="titleText"
      :action="actionText"
      @actioned="richTextActioned"
      @close="closeRichTextDialog"
    />
    <UpdateRoomDialog
      :dialog-visible="updateRoomVisible"
      :roomm="room"
      @updated="roomDialogUpdated"
      @close="updateRoomDialogClose"
    />
    <AddRoomDialog
      :dialog-visible="addRoomVisible"
      :hotel-id="Number.parseInt($route.params.id)"
      @added="roomDialogAdded"
      @close="roomDialogClose"
    />
  </div>
</template>

<script>
import {
  queryHotelById,
  queryRoomByHotel
} from '@/api/theme-hotel'
import { global } from '@/utils/global'
import RichText from '@/components/RichText'
import AddRoomDialog from './addDialog'
import UpdateRoomDialog from './updateDialog'
export default {
  components: {
    RichText,
    AddRoomDialog,
    UpdateRoomDialog
  },
  data() {
    return {
      hotel: {
        id: 0
      },
      loading: false,
      richTextVisible: false,
      code: 0,
      content: '',
      titleText: '',
      actionText: '',
      addRoomVisible: false,
      room: {},
      updateRoomVisible: false
    }
  },
  async created() {
    this.loading = true
    let res
    if (this.$store.getters.themeHotel.hotel.id) {
      this.hotel = this.$store.getters.themeHotel.hotel
    } else if (this.$route.params.id) {
      res = await queryHotelById(this.$route.params.id)
    }
    if (res) {
      this.hotel = res.data
      global.$emit('changeTitle', this.hotel.name)
    }
    this.queryRoomByHotelById(this.hotel.id)
  },
  methods: {
    queryRoomByHotelById(id) {
      this.loading = true
      queryRoomByHotel(id).then(res => {
        this.hotel.roomList = res.data
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.loading = false
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    updateRichText(code, content) {
      this.content = content
      this.code = code
      switch (code) {
        case 1: {
          this.titleText = '酒店介绍'
          this.actionText = '提交修改介绍'
          break
        }
        case 2: {
          this.titleText = '酒店地址'
          this.actionText = '提交修改地址'
          break
        }
        case 3: {
          this.titleText = '推荐理由'
          this.actionText = '提交修改理由'
          break
        }
        case 4: {
          this.titleText = '酒店环境'
          this.actionText = '提交修改环境'
          break
        }
      }
      this.richTextVisible = true
    },
    richTextActioned(res) {
      if (res.id === this.hotel.id) {
        switch (this.code) {
          case 1: {
            this.hotel.introduce = res.introduce
            break
          }
          case 2: {
            this.hotel.address = res.address
            break
          }
          case 3: {
            this.hotel.recommend = res.recommend
            break
          }
          case 4: {
            this.hotel.surrounding = res.surrounding
            break
          }
        }
      }
      this.closeRichTextDialog()
    },
    closeRichTextDialog() {
      this.titleText = ''
      this.actionText = ''
      this.richTextVisible = false
    },
    addRoom() {
      this.addRoomVisible = true
    },
    roomDialogAdded(res) {
      this.hotel.roomList.concat(res.room)
      this.queryRoomByHotelById(this.hotel.id)
      this.roomDialogClose()
    },
    roomDialogClose() {
      this.addRoomVisible = false
    },
    updateRoom(index, room) {
      this.room = JSON.parse(JSON.stringify(room))
      this.updateRoomVisible = true
    },
    roomDialogUpdated(res) {
      this.queryRoomByHotelById(this.hotel.id)
      this.updateRoomDialogClose()
    },
    updateRoomDialogClose() {
      this.room = {
        id: 0,
        name: '',
        roomBed: {
          id: 1
        },
        roomBreakfast: {
          id: 1
        },
        wifi: false,
        price: 0,
        area: 0,
        floor: '',
        explain: '无',
        hotel: {
          id: 0
        }
      }
      this.updateRoomVisible = false
    },
    deleteRoom(index, id) {
      this.$confirm('此操作将永久删除该房间, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.first-row{
  margin-top: 8px;
}
.top-room {
  margin: 8px 0;
  &-left {
    float: left;
    &-select {
      margin: 0 10px;
    }
  }
  &-right {
    float: right;
  }
}

.item {
  align-items: center;
  background: #fafafa;
  box-sizing: border-box;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid #ebeef5;
  &-left {
    padding: 12px 10px;
    color: #6f7175;
  }
  &-right{
    padding: 12px 10px;
    border-left: 1px solid #ebeef5;
    color: #606266;
    font-weight: 700;
    background-color: #fff;
  }
  &-but{
    text-align: center;
  }
}

.item-do {
  justify-content: space-around;

  &-but {
    margin: 2px 0;
  }
}
</style>
